<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>货车类型管理</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-toolbar clearfix">
          <div class="toolbar-btn-action">
            <a class="btn btn-primary m-r-5" href="#!" id="addType"><i class="mdi mdi-plus"></i> 新增类型</a>
            <a class="btn btn-danger" href="#!" id="deleteBatch"><i class="mdi mdi-window-close"></i> 批量删除</a>
          </div>
        </div>

        <div class="card-body">

          <div class="table-responsive">
            <table class="table table-bordered table-hover table-striped">
              <thead>
              <tr>
                <th>
                  <label class="lyear-checkbox checkbox-primary">
                    <input type="checkbox" id="check-all"><span></span>
                  </label>
                </th>
                <th>#</th>
                <th>名称</th>
                <th>创建时间</th>
                <th>最近编辑时间</th>
                <th>操作员</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody id="list">
              </tbody>
            </table>
          </div>

          <!--分页信息-->
          <div class="row">
            <div class="col-sm-4" style="padding-top: 28px;" id="page_info_area">
            </div>
            <!--分页条-->
            <div class="col-sm-4" id="page_nav_area">
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

  <!--添加和修改类型的模态框-->
  <div class="modal fade" id="typeInfoModal" tabindex="-1" role="dialog"
       aria-labelledby="myModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModal">新增内容</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="typeInfoForm">
            <div class="form-group">
              <label for="type_name" class="col-sm-4 control-label">类型名称：</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="type_name" name="name">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="length" class="col-sm-4 control-label">车厢长度：</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="text" class="form-control" id="length" name="length" aria-describedby="length_unit">
                  <span class="input-group-addon" id="length_unit">m</span>
                </div>
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="width" class="col-sm-4 control-label">车厢宽度：</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="text" class="form-control" id="width" name="width" aria-describedby="width_unit">
                  <span class="input-group-addon" id="width_unit">m</span>
                </div>
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="height" class="col-sm-4 control-label">车厢高度：</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="text" class="form-control" id="height" name="height" aria-describedby="height_unit">
                  <span class="input-group-addon" id="height_unit">m</span>
                </div>
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="loads" class="col-sm-4 control-label">载重：</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="text" class="form-control" id="loads" name="loads" aria-describedby="loads_unit">
                  <span class="input-group-addon" id="loads_unit">kg</span>
                </div>
                <span class="help-block"></span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary hidden" id="edit_btn">编辑</button>
              <button type="submit" class="btn btn-primary" id="submit_btn">提交</button>
            </div>
          </form>
        </div>

      </div>
    </div>


  </div>

</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script src="/static/js/mycommons.js"></script>
<script type="text/javascript">
  let currentPage
  $(function () {
    $('.search-bar .dropdown-menu a').click(function () {
      var field = $(this).data('field') || '';
      $('#search-field').val(field);
      $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    });

    // 获取第一页货车类型
    to_page(1)
  });

  /*
   * 分页查询货车类型
   */
  function to_page(pn) {
    $.get("/pageCarType", {pn: pn}, function (res) {
      if (res.flag) {
        //1、解析并显示规则数据
        build_type_table(res)
        //2、解析并显示分页信息
        build_page_info(res)
        //3、解析显示分页条数据
        build_page_nav(res)
      } else {
        $("#list").html("暂时没有符合条件的结果")
      }
    })
  }

  /*
  输入页码翻页
   */
  turnPage()

  /*
  解析并显示货车类型数据
   */
  function build_type_table(res) {
    //填充数据
    let typeList = ""
    let list = res.data.records
    for (let i = 0; i < list.length; i++) {
      let item = list[i]
      let type = "<tr>\n" +
          "                  <td>\n" +
          "                    <label class=\"lyear-checkbox checkbox-primary\"> \n" +
          "                      <input type=\"checkbox\" class='check-item' name=\"ids[]\" value=\"1\"><span></span>\n" +
          "                    </label>\n" +
          "                  </td>\n" +
          "                  <td>" + item.id + "</td>\n" +
          "                  <td>" + item.name + "</td>\n" +
          "                  <td>" + formatTimeObj(item.createTime) + "</td>" +
          "                  <td>" + formatTimeObj(item.lastEditTime) + "</td>" +
          "                  <td>" + item.operator.name + "</td>" +
          "                  <td>\n" +
          "<button type=\"button\" class=\"btn btn-success detail_btn\">" +
          "<span class=\"glyphicon glyphicon-eye-open\" aria-hidden=\"true\"></span>详情</button> " +
          "<button type=\"button\" class=\"btn btn-primary edit_btn\">" +
          "<span class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></span>编辑</button> " +
          "<button type=\"button\" class=\"btn btn-danger del_btn\">" +
          "<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>删除</button>" +
          "                  </td>\n" +
          "                </tr>"
      typeList += type
    }
    $("#list").html(typeList)
  }

  /*
  点击详情按钮弹出模态框
   */
  $(document).on("click", ".detail_btn", function () {
    //填充模态框数据
    fillModal(this)
    //更改模态框为查看详情状态
    detailModal("#typeInfoModal")
  })

  /*
  点击模态框的编辑按钮让表单为可编辑状态
   */
  $("#edit_btn").click(function () {
    editModal("#typeInfoModal")
  })

  /*
    填充模态框并弹出
     */
  function fillModal(ele) {
    //查出并显示类型信息
    let id = $(ele).parents("tr").find("td:eq(1)").text()
    getCarTypeById(id)

    //把规则的id传递给模态框的更新按钮
    $("#submit_btn").addClass("edit_submit").attr("edit-id", id)
    $("#typeInfoModal").modal({
      backdrop: "static"
    })
  }

  /*
  点击新增按钮弹出模态框
   */
  $("#addType").click(function () {
    $(".modal-title").text("新增内容")
    //清除表单数据（表单完整重置（表单的数据，表单的样式））
    reset_form("#typeInfoModal form")
    //弹出模态框
    $("#typeInfoModal").modal({
      backdrop: "static"
    })
  })

  /*
  点击更新按钮弹出模态框
   */
  $(document).on("click",".edit_btn",function(){
    editModal("#typeInfoModal")
    fillModal(this)
  })

  /*
  根据id发送Ajax请求查询类型信息
   */
  function getCarTypeById(id) {
    $.get("/carType/"+id, {}, function (res) {
      let type = res.data
      $("#type_name").val(type.name)
      $("#length").val(type.length)
      $("#width").val(type.width)
      $("#height").val(type.height)
      $("#loads").val(type.loads)
    })
  }

  /*
  校验表单数据
   */
  function validate_add_form() {
    let flag = true
    //类型名称匹配2-5位中文、英文、数字
    if (/^[\u4E00-\u9FA5A-Za-z0-9]{2,5}$/.test($("#type_name").val())) {
      show_validate_msg("#type_name", "success", "")
    } else {
      show_validate_msg("#type_name", "error", "请输入2至5位中文、英文或数字")
      flag = false
    }

    //校验长宽高和载重，
    $.each($("#typeInfoForm input:gt(0)"), function (index, item) {
      if (/^\d+(\.\d+)?$/.test($(item).val()) && $(item).val() !== "" && $.trim($(item).val()).length !== 0) {
        show_validate_msg(item, "success", "")
      } else {
        show_validate_msg(item, "error", "请输入正确的数字格式")
        flag = false
      }
    })

    return flag
  }

  /*
  更新和新增类型
   */
  $("#typeInfoForm").submit(function (event) {
    //校验表单信息
    if (!validate_add_form()) {
      return false
    }
    event.preventDefault()
    $("#typeInfoModal").modal('hide')
    let submit_btn = $("#submit_btn")
    if (submit_btn.hasClass("edit_submit")) {
      //清除按钮的edit_submit类
      submit_btn.removeClass("edit_submit")
      //编辑类型
      $.ajax({
        url: "/carType/" + submit_btn.attr("edit-id"),
        type: "PUT",
        data: $(this).serialize(),
        success: function (res) {
          to_page(currentPage)
          if (res.flag) {
            msgNotify(res.msg, "success", 1500)
          } else {
            msgNotify(res.msg,  "danger", 1500)
          }
        }
      })
    } else {
      //新增类型
      $.post("/carType", $(this).serialize(), function (res) {
        to_page(1)
        if (res.flag) {
          msgNotify(res.msg, 'success', 1500)
        } else {
          msgNotify(res.msg, 'danger', 1500)
        }
      })
    }
  })

  /*
  删除一个货车类型
   */
  deleteOne("/carType")

  /*
  删除多个货车类型
   */
  deleteBatch("/carType")

  /*
  check_item
   */
  check_item()

</script>
</body>
</html>